<template>
    <div>
        <div class="div1">
            <div class="demo-input-suffix" style="display: inline-block">
                <el-input
                        placeholder="请输入部门名称"
                        prefix-icon="el-icon-search"
                        style="width: 190px"
                        v-model="filterText">
                </el-input>
                <el-tree
                        class="filter-tree"
                        :data="depts"
                        :props="defaultProps"
                        default-expand-all
                        :filter-node-method="filterNode"
                        @node-click="handleNodeClick"
                        ref="tree">
                </el-tree>
            </div>
        </div>
        <div class="div2">
            <span style="font-weight: 700 ; font-size: 15px ;margin-right: 10px">用户名称</span>
            <div class="demo-input-suffix">
                <el-input
                        placeholder="请输入用户名称"
                        v-model="input2">
                </el-input>
            </div>
            <span style="font-weight: 700 ; font-size: 15px ;margin-right: 10px">手机号码</span>
            <div class="demo-input-suffix">
                <el-input
                        placeholder="请输入手机号码"
                        v-model="input3">
                </el-input>
            </div>


            <span style="font-weight: 700 ; font-size: 15px ;margin-right: 10px">状态</span>
            <!--            <div class="demo-input-suffix">-->
            <!--                <el-input-->
            <!--                        placeholder="用户状态"-->
            <!--                        v-model="input4">-->
            <!--                </el-input>-->
            <!--            </div>-->

            <el-select v-model="input4"
                       style="display: inline-block;width: 150px;margin-right: 20px;margin-bottom: 10px"
                       placeholder="用户状态">
                <el-option label="正常" value="0"></el-option>
                <el-option label="停用" value="1"></el-option>
            </el-select>


            <div class="block" style="margin-top: 20px ;margin-right: 10px ;display: inline-block">
                <span class="demonstration" style="font-weight: 700 ; font-size: 15px ;margin-right: 7px">创建时间 </span>
                <el-date-picker
                        v-model="value1"
                        type="daterange"
                        range-separator="-"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        style="width: 220px">
                </el-date-picker>
            </div>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
            <br><br>

            <el-row style="display: inline-block; margin-right: 15px">
                <el-button type="primary" class="el-icon-plus" size="mini" @click="addUser" plain>新增</el-button>
            </el-row>

            <el-row style="display: inline-block; margin-right: 15px">
                <el-button type="success" class="el-icon-edit" size="mini" disabled>修改</el-button>
            </el-row>

            <el-row style="display: inline-block; margin-right: 15px">
                <el-button
                        type="danger"
                        icon="el-icon-delete"
                        @click="delAll"
                        size="mini"
                        :disabled="multipleSelection.length === 0">删除
                </el-button>
            </el-row>

            <el-row style="display: inline-block; margin-right: 15px">
                <el-button type="info" class="el-icon-upload2" size="mini" plain>导入</el-button>
            </el-row>
            <el-row style="display: inline-block; margin-right: 15px">
                <el-button
                        type="warning"
                        class="el-icon-download"
                        size="mini"
                        @click="exportuser"
                        :disabled="multipleSelection.length === 0"
                        plain>导出
                </el-button>
            </el-row>
            <br>


            <el-table
                    :data="sysusers"
                    :row-key="getRowKeys"
                    style="width: 100% ;font-size: 10px"
                    :row-style="{height:'18px'}"
                    :cell-style="{padding:'0px'}"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column
                        type="selection"
                        width="55"
                        :selectable="checkSelect"
                        :reserve-selection="true"
                >
                </el-table-column>

                <el-table-column
                        label="用户编号"
                        width="80">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.userId }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="用户名称"
                        width="80">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.userName}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="用户昵称"
                        width="80">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.nickName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="部门"
                        width="80">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.createBy }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="手机号码"
                        width="120">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.phonenumber}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="状态"
                        width="50">
                    <!--                    <template slot-scope="scope">-->
                    <!--                        <span style="margin-left: 10px">{{ scope.row.status}}</span>-->
                    <!--                    </template>-->
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.status"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-value="0"
                                inactive-value="1"
                                :disabled="scope.row.userId==1"
                                @change="ChangeStatus(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        label="创建时间"
                        width="100">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.createTime}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="290">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                icon="el-icon-edit"
                                type="success"
                                v-if="scope.row.userId!=1"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                icon="el-icon-edit"
                                type="success"
                                v-if="scope.row.userId==1"
                                @click="handleEdit(scope.$index, scope.row)"
                                disabled>编辑
                        </el-button>

                        <el-button
                                size="mini"
                                icon="el-icon-circle-check"
                                type="primary"
                                v-if="scope.row.userId!=1"
                                @click="handleComments(scope.$index, scope.row)">重置密码
                        </el-button>
                        <el-button
                                size="mini"
                                icon="el-icon-circle-check"
                                type="primary"
                                @click="handleComments(scope.$index, scope.row)"
                                v-if="scope.row.userId==1"
                                disabled>重置密码
                        </el-button>


                        <el-button
                                size="mini"
                                type="danger"
                                icon="el-icon-delete"
                                v-if="scope.row.userId!=1"
                                @click="handleDelete(scope.row)">删除
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                icon="el-icon-delete"
                                v-if="scope.row.userId==1"
                                @click="handleDelete(scope.row)"
                                disabled>删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--        //分页-->
            <el-pagination
                    background
                    :page-size="pageSize"
                    layout="prev, pager, next"
                    @current-change="loadSysUsers"
                    :total="total">
            </el-pagination>
        </div>

        <div>
            <!--    添加-->
            <el-dialog title="添加角色" :visible.sync="dialogFormVisible">
                <el-form :model="sysuser" :rules="rules1"  ref="sysuser">

                    <el-form-item prop="nickName" label="用户昵称" style="display: inline-block" :label-width="formLabelWidth">
                        <el-input v-model="sysuser.nickName" style="width: 180px" placeholder="请输入用户昵称"
                                  autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="归属部门" style="display: inline-block;position: absolute"
                                  :label-width="formLabelWidth">
                        <treeselect v-model="sysuser.deptId"

                                    style="width: 180px;background-color: #fff;"
                                    :options="depts"
                                    :normalizer="normalizer"
                                    :show-count="true"
                                    placeholder="请选择归属部门"/>
                    </el-form-item>
                    <br>

                    <el-form-item prop="phonenumber" label="手机号码" style="display: inline-block" :label-width="formLabelWidth">
                        <el-input v-model="sysuser.phonenumber" style="width: 180px" placeholder="请输入手机号码"
                                  autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item prop="email" label="邮箱" style="display: inline-block" :label-width="formLabelWidth">
                        <el-input v-model="sysuser.email" style="width: 180px" placeholder="请输入邮箱"
                                  autocomplete="off"></el-input>
                    </el-form-item>
                    <br>
                    <el-form-item prop="userName" label="用户名称" style="display: inline-block" :label-width="formLabelWidth">
                        <el-input v-model="sysuser.userName" style="width: 180px" placeholder="请输入用户名称"
                                  autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item prop="password" label="用户密码" style="display: inline-block" :label-width="formLabelWidth">
                        <el-input type="password" v-model="sysuser.password" style="width: 180px" placeholder="请输入用户密码"
                                  autocomplete="off"></el-input>
                    </el-form-item>
                    <br>
                    <el-form-item label="用户性别" style="display: inline-block" :label-width="formLabelWidth">
                        <el-select v-model="sysuser.sex" style="width: 180px" placeholder="请选择性别"  >
                            <el-option
                                    v-for="item in sexes"
                                    :key="item.dictValue"
                                    :label="item.dictLabel"
                                    :value="item.dictValue">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="状态" style="display: inline-block" :label-width="formLabelWidth">
                        <el-radio v-model="sysuser.status" label="0">正常</el-radio>
                        <el-radio v-model="sysuser.status" label="1">停用</el-radio>
                    </el-form-item>
                    <br>
                    <el-form-item label="岗位" style="display: inline-block" :label-width="formLabelWidth">
                        <el-select v-model="sysuser.post" style="width: 180px" placeholder="请选择岗位">
                            <el-option
                                    v-for="item in posts"
                                    :key="item.postId"
                                    :label="item.postName"
                                    :value="item.postId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="角色" style="display: inline-block" :label-width="formLabelWidth">
                        <el-select v-model="sysuser.role" style="width: 180px" placeholder="请选择角色">
                            <el-option
                                    v-for="item in roles"
                                    :key="item.roleId"
                                    :label="item.roleName"
                                    :value="item.roleId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <br>
                    <el-form-item prop="remark" label="备注" :label-width="formLabelWidth">
                        <el-input type="textarea" v-model="sysuser.remark" placeholder="请输入内容" style="width: 480px"
                                  autocomplete="off"></el-input>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveUser()">确 定</el-button>
                </div>
            </el-dialog>
        </div>

        <div>
            <!--    修改-->
            <el-dialog title="修改角色" :visible.sync="dialogFormVisible1">
                <el-form :model="sysuser" :rules="rules1"  ref="sysuser">

                    <el-form-item prop="nickName" label="用户昵称" style="display: inline-block" :label-width="formLabelWidth">
                        <el-input v-model="sysuser.nickName" style="width: 180px" placeholder="请输入用户昵称"
                                  autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="归属部门" style="display: inline-block;position: absolute"
                                  :label-width="formLabelWidth">
                        <treeselect v-model="sysuser.deptId"

                                    style="width: 180px;background-color: #fff;"
                                    :options="depts"
                                    :normalizer="normalizer"
                                    :show-count="true"
                                    placeholder="请选择归属部门"/>
                    </el-form-item>
                    <br>

                    <el-form-item prop="phonenumber" label="手机号码" style="display: inline-block" :label-width="formLabelWidth">
                        <el-input v-model="sysuser.phonenumber" style="width: 180px" placeholder="请输入手机号码"
                                  autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item prop="email" label="邮箱" style="display: inline-block" :label-width="formLabelWidth">
                        <el-input v-model="sysuser.email" style="width: 180px" placeholder="请输入邮箱"
                                  autocomplete="off"></el-input>
                    </el-form-item><br>

                    <el-form-item label="用户性别" style="display: inline-block" :label-width="formLabelWidth">
                        <el-select v-model="sysuser.sex" style="width: 180px" placeholder="请选择性别">
                            <el-option
                                    v-for="item in sexes"
                                    :key="item.dictValue"
                                    :label="item.dictLabel"
                                    :value="item.dictValue">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="状态" style="display: inline-block" :label-width="formLabelWidth">
                        <el-radio v-model="sysuser.status" label="0">正常</el-radio>
                        <el-radio v-model="sysuser.status" label="1">停用</el-radio>
                    </el-form-item>
                    <br>

                    <el-form-item label="岗位" style="display: inline-block" :label-width="formLabelWidth">
                        <el-select v-model="sysuser.post" style="width: 180px" placeholder="请选择岗位">
                            <el-option
                                    v-for="item in posts"
                                    :key="item.postId"
                                    :label="item.postName"
                                    :value="item.postId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="角色" style="display: inline-block" :label-width="formLabelWidth">
                        <el-select v-model="sysuser.role" style="width: 180px" placeholder="请选择角色">
                            <el-option
                                    v-for="item in roles"
                                    :key="item.roleId"
                                    :label="item.roleName"
                                    :value="item.roleId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <br>
                    <el-form-item prop="remark" label="备注" :label-width="formLabelWidth">
                        <el-input type="textarea" v-model="sysuser.remark" placeholder="请输入内容" style="width: 480px"
                                  autocomplete="off"></el-input>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="saveUser1()">确 定</el-button>
                </div>
            </el-dialog>
        </div>

        <div>
            <!--    修改密码-->
            <el-dialog title="重置密码" :visible.sync="dialogFormVisible2">

                <el-form :model="ruleForm" status-icon :rules="rules2" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="密码" prop="pass">
                        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="savePassword">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
<!--                <div slot="footer" class="dialog-footer">-->
<!--                    <el-button @click="dialogFormVisible2 = false">取 消</el-button>-->
<!--                    <el-button type="primary" @click="savePassword">确 定</el-button>-->
<!--                </div>-->
            </el-dialog>
        </div>

        <el-button
                plain
                @click="open1"
                style="display: none">
            删除成功
        </el-button>
        <el-button
                plain
                @click="open2"
                style="display: none">
            添加成功
        </el-button>
        <el-button
                plain
                @click="open3"
                style="display: none">
            修改成功
        </el-button>
        <el-button
                plain
                @click="open4"
                style="display: none">
            添加失败
        </el-button>
        <el-button
                plain
                @click="open5"
                style="display: none">
            导出成功
        </el-button>
        <el-button
                plain
                @click="open6"
                style="display: none">
            修改失败
        </el-button>

    </div>
</template>

<script>

    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'

    export default {
        name: "User",
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        components: {Treeselect},
        data() {
            var checkAge = (rule, value, callback) => {
                    setTimeout(() => {
                        if (!Number.isInteger(value)) {
                            callback(new Error('请输入数字值'));
                        } else {
                            if (value < 18) {
                                callback(new Error('必须年满18岁'));
                            } else {
                                callback();
                            }
                        }
                    }, 1000);
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };

            return {
                ruleForm: {
                    pass: '',
                    checkPass: '',
                },
                rules1:{
                    nickName:[
                        { required: true, message: '用户昵称不能为空', trigger: 'blur' },
                    ],
                    phonenumber:[
                        { required: true, message: '手机号码不能为空', trigger: 'blur' },
                        {  min: 11, max: 11 , message: '手机号码为11位', trigger: 'blur' },
                    ],
                    email:[
                        { required: true, message: '邮箱不能为空', trigger: 'blur' },
                    ],
                    userName:[
                        { required: true, message: '用户名称不能为空', trigger: 'blur' },
                    ],
                    password:[
                        { required: true, message: '密码不能为空', trigger: 'blur' },
                        {  min: 6, max: 11 , message: '密码长度在6-11期间', trigger: 'blur' },
                    ],
                    remark:[
                        { required: true, message: '备注不能为空', trigger: 'blur' },
                    ]
                },
                rules2: {
                    pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkPass: [
                        { validator: validatePass2, trigger: 'blur' }
                    ]
                },
                multipleSelection: [],
                checkPass:'',
                filterText: '',
                input2: '',
                input3: '',
                input4: '',
                value1: '',
                deptId: '',
                dictType: 'sys_user_sex',
                sexes: [],//性别下拉框
                posts: [],//岗位下拉框
                roles: [],//角色下拉框
                formLabelWidth: "120px",
                dialogFormVisible: false,
                dialogFormVisible1: false,
                dialogFormVisible2: false,
                total: 0,//人员总数
                current: 1,//当前页数
                pageSize: 3,
                sysusers: [],
                ancestors: '',
                user: {postId: 0},
                sysuser: {
                    userId: '',
                    deptId: '',
                    email: '',
                    userName: '',
                    password: '',
                    sex: '',
                    remark: '',//添加备注
                    nickName: '',
                    createBy: '',//创建者
                    phonenumber: '',
                    status: '',
                    post: '',
                    createTime: '',
                    role: '',//添加的角色
                    updateBy:'',//更新者

                },
                depts: [],
                defaultProps: {
                    children: 'depts',
                    label: 'deptName'
                },
            }
        },
        methods: {
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            open1() {
                this.$notify({
                    title: '删除成功',
                    message: '',
                    type: 'success'
                });
            },

            open2() {
                this.$notify({
                    title: '添加成功',
                    message: '',
                    type: 'success'
                });
            },

            open3() {
                this.$notify({
                    title: '修改成功',
                    message: '',
                    type: 'success'
                });
            },

            open4() {
                this.$notify.error({
                    title: '添加失败',
                    message: ''
                });
            },

            open5() {
                this.$notify({
                    title: '导出成功',
                    message: '',
                    type: 'success'
                });
            },
            open6() {
                this.$notify.error({
                    title: '修改失败',
                    message: ''
                });
            },

            checkSelect (row) {
                let isChecked = true;
                if (row.userId==1) { // 判断里面是否存在某个参数
                    isChecked = false
                } else {
                    isChecked = true
                }
                return isChecked
            },
            handleSelectionChange(val) {
                console.log(val)  //打印选中的行集合
                this.multipleSelection = val;
            },
            //点击行触发，选中或不选中复选框
            handleRowClick(row, column, event) {
                this.$refs.handSelectTest_multipleTable.toggleRowSelection(row);
                console.log(row)  //打印的时当前选中的行
            },
            //多选删除
            delAll() {
                if (confirm("是否确定？")) {
                    for (var i = 0; i < this.multipleSelection.length; i++) {

                        this.axios.delete("http://localhost:8080/users/deleteuser/" + this.multipleSelection[i].userId)
                            .then(res => {
                                if (res.data.data == "删除成功") {
                                    this.current=1;
                                    this.loadSysUsers(this.current);
                                    this.reset();
                                }
                            })
                    }
                    // alert("删除成功");
                    this.open1();
                }
            },
            getRowKeys(row) {
                return row.userId;
            },
            //
            //导出excel
            exportuser() {
                this.axios({
                    method: "post",
                    url: "http://localhost:8080/users/export", // 请求地址
                    data: this.multipleSelection, // 参数
                    responseType: 'blob' // 表明返回服务器返回的数据类型
                }).then(
                    res => {
                        if (res && res.data) {
                            this.open5();
                            // 调用js-file-download下载文件，第一个参数是数据流，第二个参数是文件名，我这后端返回时把文件名放到响应的header的filename字段中，所以用这种方式取出
                            this.jsFileDownload(res.data, decodeURIComponent("用户信息.xlsx"))
                        }
                    }
                )
            },

            // 转换菜单数据结构
            normalizer(node) {
                if (node.depts && !node.depts.length) {
                    delete node.depts
                }
                if (node.deptName == null) {
                    node.deptName = "智慧社区"
                }
                return {
                    id: node.deptId,
                    label: node.deptName,
                    children: node.depts,
                    // isDisabled: node.menuType != 'F' ? false : true
                }
            },

            //显示数据表
            loadSysUsers(current) {
                    this.current = current;
                this.axios.post("http://localhost:8080/users/text?current=" + this.current, {
                    "ancestors": this.ancestors,
                    "userName": this.input2,
                    "phonenumber": this.input3,
                    "status": this.input4,
                    "createTime": this.value1[0],
                    "updateTime": this.value1[1],
                    "deptId": this.deptId
                })
                    .then(res => {
                        console.log(res);
                        this.sysusers = res.data.data.records;
                        this.current = res.data.data.current;
                        this.total = res.data.data.total;
                    })

                this.axios.get("http://localhost:8080/SysDictData/dictType?dictType=" + this.dictType)
                    .then(res => {
                        console.log(res);
                        this.sexes = res.data.data;
                        console.log(this.sexes)
                    }),
                    this.axios.get("http://localhost:8080/post/list")
                        .then(res => {
                            console.log(res);
                            this.posts = res.data.data;
                            console.log(this.posts)
                        }),
                    this.axios.get("http://localhost:8080/roles")
                        .then(res => {
                            console.log(res);
                            this.roles = res.data.data;
                            console.log(this.roles)
                        })

            },
            //添加
            saveUser() {
                this.sysuser;
                this.sysuser.createBy= localStorage.getItem("username");
                this.axios.post("http://localhost:8080/users/adduser?postId=" + this.sysuser.post, this.sysuser)
                    .then(res => {
                        if (res.data.data == "添加失败"){
                            this.open4();
                        }else {
                            this.sysuser.userId = res.data.data;
                            this.axios.post("http://localhost:8080/users/addpost?postId=" + this.sysuser.post, this.sysuser)
                                .then(res => {
                                    if (res.data.data = "添加成功") {

                                        this.axios.post("http://localhost:8080/users/addrole?roleId=" + this.sysuser.role, this.sysuser)
                                            .then(res => {
                                                if (res.data.data = "添加成功") {
                                                    this.open2();
                                                    this.loadSysUsers(this.current);

                                                }
                                            })
                                    }
                                })
                        }
                    });

                this.dialogFormVisible = false;
            },
            //添加弹窗
            addUser() {
                this.sysuser = {
                    userId: '',
                    deptId: '',
                    email: '',
                    userName: '',
                    password: '',
                    sex: '0',
                    remark: '',
                    nickName: '',
                    createBy: '',
                    phonenumber: '',
                    status: '0',
                    post: 4,
                    createTime: '',
                    role: 2,
                    updateBy: '',
                },
                    this.dialogFormVisible = true;
            },
            //修改弹窗+回显
            handleEdit(index, row) {
                console.log(row),
                    this.axios.get("http://localhost:8080/users/getById/" + row.userId)
                        .then(res => {
                            this.sysuser.nickName = res.data.data.nickName;
                            this.sysuser.deptId = res.data.data.deptId;
                            this.sysuser.phonenumber = res.data.data.phonenumber;
                            this.sysuser.email = res.data.data.email;
                            this.sysuser.sex = res.data.data.sex;
                            this.sysuser.status = res.data.data.status;
                            this.sysuser.remark = res.data.data.remark;
                            this.sysuser.userId = res.data.data.userId;
                            this.axios.get("http://localhost:8080/users/postid/" + row.userId)
                                .then(res => {
                                    res.data.data;
                                    this.sysuser.post = res.data.data.postId;
                                    this.axios.get("http://localhost:8080/users/roleid/" + row.userId)
                                        .then(res => {
                                            res.data.data;
                                            this.sysuser.role = res.data.data.roleId;
                                        })
                                })
                        }),
                    this.dialogFormVisible1 = true;
            },
            //修改
            saveUser1() {
                this.sysuser;
                this.sysuser.updateBy= localStorage.getItem("username");
                this.axios.put("http://localhost:8080/users/updateuser", this.sysuser)
                    .then(res => {
                        if (res.data.data == "修改成功") {

                            this.axios.put("http://localhost:8080/users/updatepost/" + this.sysuser.post, this.sysuser)
                                .then(res => {
                                    if (res.data.data == "修改成功") {
                                        this.axios.put("http://localhost:8080/users/updaterole/" + this.sysuser.role, this.sysuser)
                                            .then(res => {
                                                this.open3();
                                                this.loadSysUsers(this.current);
                                            })
                                    }
                                })
                        }
                    })
                this.dialogFormVisible1 = false;
            },
            //删除
            handleDelete(row) {
                if (confirm("是否确定？")) {
                    this.axios.delete("http://localhost:8080/users/deleteuser/" + row.userId)
                        .then(res => {
                            if (res.data.data == "删除成功") {
                                this.open1();
                                this.current=1;
                                this.loadSysUsers(this.current);
                                this.reset();
                            }
                        })
                }
            },
            //修改密码弹窗
            handleComments(index, row) {
                console.log(index, row);
                this.sysuser.password = '';
                this.sysuser.userId = row.userId;
                this.ruleForm.pass='';
                this.ruleForm.checkPass='';
                this.dialogFormVisible2 = true;
            },
            //保存密码
            savePassword() {
                if (this.ruleForm.pass==this.ruleForm.checkPass){
                    console.log(this.sysuser);
                    this.sysuser.password=this.ruleForm.pass;
                    this.axios.put("http://localhost:8080/users/updatePassword", this.sysuser)
                        .then(res => {
                            this.dialogFormVisible2 = false;
                            this.open3();
                        })
                }else {
                    this.open6();
                }
            },

            //按钮状态修改
            ChangeStatus(row) {
                // alert("id为："+row.roleId+"，当前status为："+row.status);
                this.axios.put("http://localhost:8080/users/status", row)
                    .then(res => {
                        if (res.data.data == "修改状态成功") {
                            this.open3();
                            this.loadSysUsers(this.current);
                        }
                    })
            },
            //模糊查询
            search(current) {
                // this.loadSysUsers(current);
                this.current = 1;
                this.loadSysUsers(this.current);
            },
            //重置按钮
            reset() {
                this.input2 = '',
                    this.input3 = '',
                    this.input4 = '',
                    this.value1 = ['', ''],
                    this.current = 1,
                    this.total = 1,
                    this.search(this.current)
            },
            //显示部门树
            loadDepts() {
                this.axios.get("http://localhost:8080/depts/getDeptsByTerm")
                    .then(res => {
                        this.depts = res.data.data;
                    })
            },
            //树的点击显示
            handleNodeClick(data) {
                this.ancestors = data.ancestors;
                this.deptId = data.deptId;
                this.loadSysUsers(this.current);
            },

            //树的模糊查询
            filterNode(value, data) {
                if (!value) return true;
                return data.deptName.indexOf(value) !== -1;
            }

        },
        created() {
            this.loadDepts();
            this.loadSysUsers(this.current);
        }
    }
</script>

<style scoped>
    .div1 {
        display: inline-block;
        width: 13%;
        height: 500px;
        /*background-color: powderblue;*/
        position: absolute;
    }

    .div2 {
        display: inline-block;
        width: 67%;
        height: 500px;
        /*background-color: lightgoldenrodyellow;*/
        position: absolute;
        right: 30px;
    }

    .demo-input-suffix {
        display: inline-block;
        width: 220px;
        margin-right: 10px;
    }

    /deep/ .el-table th > .cell {
        text-align: center;
    }

    /deep/ .el-table .cell {
        text-align: center;
    }

</style>
